<template>
  <div class="future-login">
    <div class="container">
      <div class="future-login-header">
        <span class="future-login-header-title">Future-template</span>
        <div class="future-login-header-desc">future-template 企业级中台前端/设计解决方案</div>
      </div>
      <div class="future-login-form">
        <a-form-model
          ref="userLoginForm"
          :model="userForm"
          @submit="handleSubmit"
          :rules="rules"
          @submit.native.prevent
        >
          <a-form-model-item prop="userName">
            <a-input v-model="userForm.userName" placeholder="请输入姓名" size="large">
              <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="password">
            <a-input v-model="userForm.password" type="password" placeholder="请输入密码" size="large">
              <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
            </a-input>
          </a-form-model-item>
          <a-form-item>
            <a-checkbox>自动登录</a-checkbox>
            <a class="right-item">忘记密码</a>
          </a-form-item>
          <a-form-model-item>
            <a-button
              :loading="loading"
              style="width:100%"
              type="primary"
              html-type="submit"
              size="large"
            >登录</a-button>
          </a-form-model-item>
          <a-form-model-item class="future-login-other">
            <span>其他登录方式</span>
            <a-icon class="item-icon" type="wechat" />
            <a-icon class="item-icon" type="qq" />
            <a-icon class="item-icon" type="dingding" />
            <a class="right-item">注册账户</a>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="future-login-fotter">
        <global-footer />
      </div>
    </div>
  </div>
</template>
<script>
import GlobalFooter from "@/components/GlobalFooter";
const rules = {
  userName: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur"
    },
    {
      min: 2,
      max: 6,
      message: "账号必须为2-6位字符",
      trigger: "blur"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur"
    },
    {
      min: 6,
      max: 10,
      message: "密码必须为6-10位字符",
      trigger: "blur"
    }
  ]
};
export default {
  components: { GlobalFooter },
  data() {
    return {
      userForm: {
        userName: undefined,
        password: undefined
      },
      rules,
      loading: false,
      redirect: undefined
    };
  },
  computed: {
    isLogin() {
      return this.userForm.userName && this.userForm.password;
    }
  },
  methods: {
    handleSubmit(e) {
      this.$refs.userLoginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.userForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        }
        return false;
      });
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  }
};
</script>

<style  scoped>
.future-login {
  height: 100%;
  width: 100%;
  background: #f0f2f5 url(/login_background.svg) no-repeat 50%;
}

.container {
  padding: 78px 0 24px 0;
}

.future-login-header {
  text-align: center;
  padding: 32px 0;
}

.future-login-header-title {
  font-size: 33px;
  font-weight: 600;
}

.future-login-header-desc {
  font-size: 14px;
  color: #808695;
}

.future-login-form {
  min-width: 260px;
  width: 368px;
  margin: 0 auto;
}

.right-item {
  float: right;
}

.future-login-other {
  text-align: left;
  line-height: 22px;
}

.future-login-other .item-icon {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.2);
  margin-left: 16px;
  vertical-align: middle;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.future-login-fotter {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0 16px;
  margin: 48px 0 24px;
  text-align: center;
}
</style>

